
<template>
  <div class="login2">
    <div class="login-form">
      <div class="login-item">
        <div class="login-label">
          <div class="label">
            企业名称
          </div>
        </div>
        <div class="login-input">
          <input v-model="ruleForm.company_name" placeholder="请输入企业名称" />
        </div>
      </div>
      <div class="login-item">
        <div class="login-label">
          <div class="label">
            联系人
          </div>
        </div>
        <div class="login-input">
          <input v-model="ruleForm.nickname" placeholder="请输入联系人" />
        </div>
      </div>
      <div class="login-item">
        <div class="login-label">
          <div class="label">
            联系手机
          </div>
        </div>
        <div class="login-input">
          <input v-model="ruleForm.phone" type="tel" placeholder="请输入手机号码" />
        </div>
      </div>
      <div class="login-item">
        <div class="login-label">
          <div class="label">
            邮箱
          </div>
        </div>
        <div class="login-input">
          <input v-model="ruleForm.email" type="tel" placeholder="请输入邮箱" />
        </div>
      </div>
      <div class="login-item">
        <div class="login-label">
          <div class="label">
            abn
          </div>
        </div>
        <div class="login-input">
          <input v-model="ruleForm.abn" type="tel" placeholder="请输入abn" />
        </div>
      </div>
      <div class="login-item">
        <div class="login-label">
          <div class="label">
            联系地址
          </div>
        </div>
        <div class="login-input">
          <input v-model="ruleForm.company_address" placeholder="请输入联系地址" />
        </div>
      </div>
      <div class="login-item">
        <div class="login-label">
          <div class="label">
            验证码
          </div>
        </div>
        <div class="login-input">
          <input v-model="ruleForm.code" type="number" placeholder="请输入验证码" />
          <div class="send-btn" @click="getCode">
            {{ tips}}
          </div>
        </div>
      </div>
    </div>
    <div class="submit-btn" @click="login">登录</div>
    <u-verification-code
        :seconds="seconds"
        @end="end" @start="start" ref="uCode"
        @change="codeChange">
    </u-verification-code>
  </div>
</template>
<script>

export default {
  name: "login",
  data() {
    return {
      seconds: 60,
      ruleForm: {
        phone: '',
        abn: '',
        code: '',
        company_name: '',
        company_address: '',
        nickname: '',
        address: '',
      },
      tips: ''
    }
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if(this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          this.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      this.$u.toast('倒计时结束');
    },
    start() {
      this.$u.toast('倒计时开始');
    },
    toRegister() {
      uni.navigateTo({
        url: '/pages/user/register'
      })
    },
    login() {
      console.log(this.ruleForm)
      if (!this.ruleForm.company_name) {
        this.$u.toast('请输入企业名称');
        return
      }
      if (!this.ruleForm.nickname) {
        this.$u.toast('请输入联系人');
        return
      }
      if (!this.ruleForm.phone) {
        this.$u.toast('请输入手机号码');
        return
      }
      if (this.ruleForm.phone.length !== 11) {
        this.$u.toast('请输入正确的手机号码');
        return
      }
      if (!this.ruleForm.address) {
        this.$u.toast('请输入联系地址');
        return
      }
      // if (!this.ruleForm.code) {
      //   this.$u.toast('请输入验证码');
      //   return
      // }
      uni.showLoading({
        title: '正在登录'
      })
      this.$api.apply({
        ...this.ruleForm,
        role: 2,
        audit_status: 0
      }).then(res => {
        uni.showToast({
          title: '申请成功',
          icon: 'success'
        })
        this.ruleForm = {
          phone: '',
          abn: '',
          code: '',
          company_name: '',
          company_address: '',
          nickname: '',
          address: '',
        }
        this.tips = ''
        setTimeout(() => {
          uni.hideLoading();
          uni.navigateBack()
        }, 1000)
      })
    },
    into() {
      uni.navigateTo({
        url: '/pages/user/into'
      })
    },
    toPoliy(type) {
      uni.navigateTo({
        url: '/pages/user/poliy?type=' + type
      })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.login2 {
  height: 100%;
  padding-top: 68rpx;
  padding-left: 64rpx;
  padding-right: 64rpx;
  position: relative;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .plofily {
    position: absolute;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 418rpx;
    height: 64rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #646466;
    line-height: 32rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    .light {
      color: #FF9346
    }
  }
  .simble-btn {
    height: 44rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #979797;
    line-height: 38rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    text-align: center;
    margin-top: 34rpx;
  }
  .submit-btn {
    margin-bottom: 70rpx;
    height: 70rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 70rpx;
    text-align: center;
    background: #FF9346;
    border-radius: 35rpx;
    margin-top: 80rpx;
  }
  .login-title {
    height: 60rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 40rpx;
    color: #303030;
    line-height: 75rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 60rpx;
  }
  .login-form {
    margin: 22rpx 0;
    overflow: auto;
    .login-item {
      margin-bottom: 40rpx;
    }
    .nav-btn {
      height: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #646466;
      line-height: 32rpx;
      text-align: right;
      margin-bottom: 120rpx;
    }
    .login-label {
      display: flex;
      align-items: center;
      height: 32rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #646466;
      line-height: 32rpx;
      text-align: right;
      font-style: normal;
      text-transform: none;
      padding-left: 20rpx;
    }
    .login-input {
      padding: 30rpx 0 20rpx 20rpx;
      border-bottom: 1px solid #EDEEF2;
      position: relative;
      .send-btn {
        position: absolute;
        right: 0;
        bottom: 14rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #FF9346;
        line-height: 40rpx;
      }
      input::placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #B6BDBD;
        line-height: 33rpx;
      }
    }
  }
}
</style>
